<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="//at.alicdn.com/t/font_1880456_j3yvm9k8lh.css">
<link rel="stylesheet" href="${request.contextPath}/static/css/gd-ui.css">
<header>
    <#if isMobile == false>
		<div class="wrapper">
			<a href="${contextPath}">
				<div class="bg-header_logo"></div>
			</a>
			<div class="search-wrap">
				<div class="input-wrap">
					<input autofocus type="text" placeholder="Please enter TikToker's name or username"
					       onblur="hideSearch()" onfocus="showSearch()"
					       oninput="searchBlogger(this.value)" class="header-input"
					       maxlength="50" />
					<i class="iconfont iconsousuo1"></i>
				</div>
				<div class="search-result" id="searchResult">
				</div>
			</div>
			<ul class="header-tab">
				<li class="<#if tab==1>is-active</#if>">
					<a href="${contextPath}">Home</a>
				</li>
				<li class="<#if tab==2>is-active</#if>">
					<a href="${contextPath}/help/home">Help Center</a>
				</li>
				<li class="more-tab" onmouseover="showPop(this)" onmouseout="hidePop(this)">
					<div>Hot TikTok</div>
					<i class="iconfont icondown1"></i>
					<ul class="pop-tabs">
						<#if login == false>
							<li class="<#if tab==3>is-active</#if>">
								<a href="${contextPath}/influencer/gdindex">Hot TikTok Influencer</a>
							</li>
							<li class="<#if tab==4>is-active</#if>">
								<a href="${contextPath}/video/spreadIndex/all">Hot TikTok Video</a>
							</li>
							<li class="<#if tab==8>is-active</#if>">
								<a href="${contextPath}/tiktok/sounds">Hot TikTok Sound</a>
							</li>
							<li class="<#if tab==7>is-active</#if>">
								<a href="${contextPath}/tiktok/hashtags">Hot TikTok Hashtag</a>
							</li>
							<li class="<#if tab==6>is-active</#if>">
								<a href="${contextPath}/tiktoker/comparison">TikTok Comparison</a>
							</li>
							<li class="<#if tab==12>is-active</#if>">
								<a href="${contextPath}/ranking/follower">Follower Growth Leaderboards</a>
							</li>
						<#else>
							<li class="<#if tab==3>is-active</#if>">
								<a target="_blank" href="https://tk.gugeedata.com/#/tiktoker/search">Hot TikTok Influencer</a>
							</li>
							<li class="<#if tab==4>is-active</#if>">
								<a target="_blank" href="https://tk.gugeedata.com/#/elements/videos">Hot TikTok Video</a>
							</li>
							<li class="<#if tab==8>is-active</#if>">
								<a target="_blank" href="https://tk.gugeedata.com/#/elements/sounds">Hot TikTok Sound</a>
							</li>
							<li class="<#if tab==7>is-active</#if>">
								<a target="_blank" href="https://tk.gugeedata.com/#/elements/hashtag">Hot TikTok Hashtag</a>
							</li>
							<li class="<#if tab==6>is-active</#if>">
								<a target="_blank" href="https://tk.gugeedata.com/#/compare/home">TikTok Comparison</a>
							</li>
							<li class="<#if tab==12>is-active</#if>">
								<a href="${contextPath}/ranking/follower">Follower Growth Leaderboards</a>
							</li>
						</#if>
					</ul>
				</li>
				<li class="<#if tab==10>is-active</#if>">
					<a href="${contextPath}/pricing">Pricing</a>
				</li>
			</ul>
            <#if login == false>
	            <a href="javascript:;" onclick="toLogin()"
	               style="text-decoration: none;margin-left: auto;">
		            <button class="small">Register/Login</button>
	            </a>
            <#else>
				<div class="account-info" onmouseover="showAccountInfo()" onmouseout="hideAccountInfo()">
					<div class="account-avatar">
						<i class="iconfont iconUser"></i>
					</div>
					<div class="wrap">
						<div class="account-top">
							<div class="title">${(user.email)!''}</div>
							<div class="tag">
                                <#if user.roleId == 1>
									<span class="gray">BASIC</span>
                                <#elseif user.roleId == 2>
									<span class="blue">PLUS</span>
                                <#elseif user.roleId == 3>
									<span class="yellow">ADVANCED</span>
                                <#else >
									<span class="red">PRO</span>
                                </#if>
							</div>
						</div>
						<div class="account-detail">
							<div class="detail-item">
								<div class="label">Credits Balance:</div>
								<div class="data"> ${user.creditsBalance}</div>
							</div>
                            <#if user.roleId gt 1>
								<div class="detail-item">
									<div class="label">Reports Remaining:</div>
									<div class="data"> ${user.dailyReports}</div>
								</div>
								<div class="detail-item">
									<div class="label">Membership Expires:</div>
                                    <#setting datetime_format="MM/dd/yyyy"/>
									<div class="data"> ${user.expiredDate?number_to_datetime}</div>
								</div>
                            </#if>
						</div>
						<div class="account-link">
							<a href="https://tk.gugeedata.com/">
								<div class="link-item">
									<div class="label">Dashboard</div>
									<i class="iconfont iconarrowright"></i>
								</div>
							</a>
                            <#--              <div class="link-item">-->
                            <#--                <div class="label">My Report</div>-->
                            <#--                <i class="iconfont iconarrowright"></i>-->
                            <#--              </div>-->
						</div>
						<div class="account-footer" onclick="loginOut()">
							Log Out
						</div>
					</div>
				</div>
            </#if>
		</div>
    <#else>
	    <#if tab != 6 && tab != 7 && tab != 8>
		    <section class="wrap">
			    <div class="logo">
				    <img src="${request.contextPath}/static/img/logo.png" alt="TikTok analysis">
			    </div>
			    <div class="title">
                    <#if tab == 3 || tab == 5 || (tab gte 11 && tab lt 15)>
					    <h1>TikTok Influencer</h1>
                    <#elseif tab gte 15>
	                    <h1>Instagram Influencer</h1>
                    <#elseif tab == 4>
					    <h1>TikTok Video</h1>
                    <#elseif tab == 10>
					    <h1>Pricing</h1>
                    </#if>
			    </div>
			    <div class="action">
				    <i class="iconfont iconsousuo" id="searchIcon"></i>
				    <i class="iconfont iconmenu-burger2" id="accountIcon"></i>
			    </div>
		    </section>
		    <section class="search-page" id="searchPage">
			    <div class="search-header">
				    <div class="left">
					    <input type="text" id="searchInput" maxlength="50" placeholder="Search" onfocus="showSearch()"
					           oninput="searchBlogger(this.value)">
					    <i class="iconfont iconsousuo"></i>
				    </div>
				    <div class="right" id="searchCancel">Cancel</div>
			    </div>
			    <div class="search-result" id="searchResult">
			    </div>
		    </section>
		    <section class="sidebar" id="accountPage">
			    <div class="sidebar-header">
				    <div class="logo">
					    <img src="${request.contextPath}/static/img/logo.png" alt="TikTok analysis">
				    </div>
				    <div class="center">GugeeData</div>
				    <i class="iconfont iconbuzhichi" id="closeAccount"></i>
			    </div>
			    <div class="sidebar-body">
                    <#if login ==true>
					    <div class="sidebar-top">
						    <div class="account-info">
							    <div class="avatar">
								    <i class="iconfont iconUser"></i>
							    </div>
							    <div>
								    <div class="title">${user.email}</div>
								    <div class="tag">
                                        <#if user.roleId == 1>
										    <span class="gray">BASIC</span>
                                        <#elseif user.roleId == 2>
										    <span class="blue">PLUS</span>
                                        <#elseif user.roleId == 3>
										    <span class="yellow">ADVANCED</span>
                                        <#else >
										    <span class="red">PRO</span>
                                        </#if>
								    </div>
							    </div>
						    </div>
						    <div class="account-remain">
							    Credits Balance: ${user.creditsBalance}
						    </div>
                            <#if user.roleId gt 1>
							    <div class="account-time">
								    Reports Remaining: ${user.dailyReports}
							    </div>
							    <div class="account-time">
                                    <#setting datetime_format="MM/dd/yyyy"/>
								    Membership Expires: ${user.expiredDate?number_to_datetime}
							    </div>
                            </#if>
					    </div>
                    </#if>
                    <#if login == false>
					    <div class="sidebar-item">
						    <div class="title">Account</div>
						    <a href="javascript:;" onclick="toLogin()">
							    <div class="sub-sidebar-item">
								    <div class="label">Log in</div>
								    <i class="iconfont iconarrowright"></i>
							    </div>
						    </a>
                            <#--          <div class="sub-sidebar-item">-->
                            <#--            <div class="label">Register</div>-->
                            <#--            <i class="iconfont iconarrowright"></i>-->
                            <#--          </div>-->
                            <#--          <div class="sub-sidebar-item">-->
                            <#--            <div class="label">My Report</div>-->
                            <#--            <i class="iconfont iconarrowright"></i>-->
                            <#--          </div>-->
						    <a href="https://www.gugeedata.com/pricing">
							    <div class="sub-sidebar-item">
								    <div class="label">Pring</div>
								    <i class="iconfont iconarrowright"></i>
							    </div>
						    </a>
					    </div>
                    </#if>
				    <div class="sidebar-item">
					    <div class="title">Navigation</div>
					    <a href="${contextPath}/influencer/gdindex">
						    <div class="sub-sidebar-item">
							    <div class="label">TikTok Influencer</div>
							    <i class="iconfont iconarrowright"></i>
						    </div>
					    </a>
					    <a href="${contextPath}/video/spreadIndex/all">
						    <div class="sub-sidebar-item">
							    <div class="label">Hot TikTok Video</div>
							    <i class="iconfont iconarrowright"></i>
						    </div>
					    </a>
					    <a href="${contextPath}/ranking/follower">
						    <div class="sub-sidebar-item">
							    <div class="label">Follower Growth Leaderboards</div>
							    <i class="iconfont iconarrowright"></i>
						    </div>
					    </a>
				    </div>
                    <#if login == true>
					    <div class="sidebar-item">
						    <div class="sub-sidebar-item" onclick="loginOut()">
							    <div class="label">Log Out</div>
						    </div>
					    </div>
                    </#if>
			    </div>
		    </section>
	    </#if>
    </#if>
    <#include "./login/index.ftl">
	<script src="${request.contextPath}/static/js/base.js"></script>
	<script src="${request.contextPath}/static/plugins/axios.min.js"></script>
	<script src="${request.contextPath}/static/js/request.js"></script>
	<script>
        let urlParams = ''
        window.onload = () => {
            getURLParams()
        }

        function getURLParams() {
            let url = window.location.href;
            if (url.indexOf('?') > 0) {
                urlParams = url.substring(url.indexOf('?'), url.length);
            }
        }
        function jump(url) {
            window.location.href = url + urlParams;
        }

        function toLogin() {
            let loginDom = document.querySelector('.login-section')
            <#if isMobile == true>
	            document.getElementById('accountPage').hide()
	            document.body.style.overflow = 'hidden'
	        <#else>
	            if(getScroll().top > 0) {
	                loginDom.style.top = 'calc(50% + ' + getScroll().top + 'px)'
	            } else {
	                loginDom.style.top = '50%'
	            }
                showMask({
	                event: () => {
                        hideLogin()
	                }
                })
            </#if>
            loginDom.show()
            document.querySelectorAll('.login-section .login-wrap').forEach((item, index) => {
                if(index === 0) {
                    item.show()
                    document.querySelector('.login-section .login-footer-tx').innerHTML =
                        'Not registered yet? <a href="javascript:;" onclick="toRegister()">Create a new account</a>'
                }else {
                    item.hide()
                }
            })
        }
        function hideLogin() {
            <#if isMobile == true>
                document.body.style.overflowY = 'auto'
	        <#else>
	            hideMask()
            </#if>
            document.querySelector('.login-section').hide()
        }

        let searchResult = document.getElementById('searchResult')
        function searchBlogger(val) {
            searchResult.innerHTML = '<div class="loading"><i class="iconfont rotate icongengxin"></i></div>'
            loadBlogger(val)()
        }

        function showSearch() {
            searchResult.show()
        }

        function hideSearch() {
            setTimeout(() => {
                searchResult.hide()
            }, 300)
        }

        let timer
        function loadBlogger(val) {
            return () => {
                if (timer) {
                    clearTimeout(timer)
                }
                timer = setTimeout(() => {
                    timer = null
	                _axios.get('/tiktoker/search?keyword=' + val).then(res => {
                        if (res && res.Code === 200) {
                            let list = res.Data
                            if (list.length > 0) {
                                let con = '<div class="search-list">'
                                list.forEach(item => {
                                    con += '<div class="search-item" onclick="toBloggerDetail(\'' + item.uniqueId + '\')">' +
                                        '              <div class="left">' +
                                        '                <img src="' + item.avatar + '" alt="' + item.nickname + '">'
                                    if (item.customVerify || item.enterpriseVerifyReason) {
                                        con += '<i class="iconfont iconzhichi"></i>'
                                    }
                                    con += '              </div>' +
                                        '              <div class="right">' +
                                        '                <div class="user-name">' + item.nickname + '</div>' +
                                        '                <div class="user-info">' + item.uniqueId + ' • Followers ' + item.followerCount + '</div>' +
                                        '              </div>' +
                                        '            </div>'
                                })
                                con += '</div>'
                                searchResult.innerHTML = con
                            } else {
                                searchResult.innerHTML = '<div class="no-data">' +
                                    '            <img src="${request.contextPath}/static/img/no-data.png">' +
                                    '            <div>' +
                                    '              No result that match your search.<br>' +
                                    '              Please modify your keywords and try again.' +
                                    '            </div>' +
                                    '          </div>'
                           }
                        }
	                })
                }, 1500)
            }
        }

        function toBloggerDetail(id) {
            window.location.href = '${contextPath}/tiktoker/' + id
        }

        function loginOut() {
            showLoading()
            _axios.get('/v1/login/out').then((res) => {
                if (res.Code === 200) {
                    window.location.reload()
                } else {
                    hideLoading()
                }
	        })
        }

        <#if isMobile == false>
	        function showPop(e) {
	            document.querySelector('.more-tab .pop-tabs').show()
	        }
	        function hidePop(e) {
	            document.querySelector('.more-tab .pop-tabs').hide()
	        }
	        <#if login == true>
	        function showAccountInfo() {
	            document.querySelector('.account-info .wrap').show()
	        }
	        function hideAccountInfo() {
	            document.querySelector('.account-info .wrap').hide()
	        }
        </#if>
        <#else>
	        document.addEventListener('gesturestart', function (event) {
	            event.preventDefault()
	        })
	        document.addEventListener('touchstart', function (event) {
	            if (event.touches.length > 1) {
	                event.preventDefault();
	            }
	        });
	        let lastTouchEnd = 0;
	        document.addEventListener('touchend', function (event) {
	            let now = (new Date()).getTime();
	            if (now - lastTouchEnd <= 300) {
	                event.preventDefault();
	            }
	            lastTouchEnd = now;
	        }, false);
	        let search = document.getElementById('searchIcon')
	        let body = document.getElementsByTagName('body')[0]
	        let searchCancel = document.getElementById('searchCancel')
	        let searchPage = document.getElementById('searchPage')
	        if(search) {
	            search.addEventListener('touchstart', (e) => {
	                searchPage.show()
	                body.style.overflowY = 'hidden'
	            })
	        }
	        if(searchCancel){
	            searchCancel.addEventListener('touchstart', (e) => {
	                searchPage.hide()
	                body.style.overflowY = 'auto'
	                searchResult.innerHTML = ''
		            document.getElementById('searchInput').value = ''
	            })
	        }

	        document.addEventListener('touchstart', function (event) {
	            if (event.touches.length > 1) {
	                event.preventDefault();
	            }
	        });
	        let accountIcon = document.getElementById('accountIcon')
	        let accountPage = document.getElementById('accountPage')
	        if(accountIcon) {
	            accountIcon.addEventListener('touchstart', (e) => {
	                accountPage.show()
	                body.style.overflowY = 'hidden'
	            })
	        }
	        let closeAccount = document.getElementById('closeAccount')
	        if(closeAccount) {
	            closeAccount.addEventListener('touchstart', (e) => {
	                accountPage.hide()
	                body.style.overflowY = 'auto'
	            })
	        }
        </#if>
	</script>
</header>